<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../font_3535107_10enq4elu49/iconfont.css">
    <link rel="stylesheet" href="../css/zc.css">
</head>

<body>
    <header>
        <div class="banxin">
            <div class="header-top">
                <div class="top-user">
                    <a href="../html/dl.html" title="登入">登入</a>&nbsp;或&nbsp;
                    <a href="javascript:;" title="注册">注册</a>&nbsp;ANTA会员
                </div>
                <div class="top-cart">
                    <a href="" title="购物车" class="iconfont icon-gouwuche"></a>
                </div>
                <div class="top-service"><a href="" title="客服" class="iconfont icon-zaixiankefu"></a></div>
                <div class="top-en">
                    <a href="javascript:;">EN</a>
                </div>
            </div>
        </div>

    </header>
    <nav>
        <div class="banxin">
            <div class="nav-left">
                <div class="logo"><a href=""><img src="../img/logo.svg" alt=""></a></div>
            </div>

            <ul class="nav-right">
                <li><a href="javascript:;" title="冬奥国旗款"><span>冬奥国旗款</span></a></li>
                <li class="Man"><a href="#" title="男子"><span>男子</span></a>
                    <div class="man">
                        <div class="center">
                            <ul>
                                <h4>所有鞋类</h4>
                                <li><a href="#">运动鞋</a></li>
                                <li><a href="#">跑鞋</a></li>
                                <li><a href="#">篮球鞋</a></li>
                                <li><a href="#">休闲鞋</a></li>
                                <li><a href="#">板鞋</a></li>
                                <li><a href="#">户外综训鞋</a></li>
                            </ul>
                            <ul>
                                <h4>所有服装</h4>
                                <li><a href="#">套头卫衣</a></li>
                                <li><a href="#">外套夹克</a></li>
                                <li><a href="#">羽绒服/马甲</a></li>
                                <li><a href="#">短袖T恤</a></li>
                                <li><a href="#">长裤</a></li>
                                <li><a href="#">运动短裤</a></li>
                            </ul>
                            <ul>
                                <h5>所有配件</h5>
                                <li><a href="#">包类</a></li>
                                <li><a href="#">运动袜子</a></li>
                            </ul>
                            <ul>
                                <h5>运动项目</h5>
                                <li><a href="#">跑步</a></li>
                                <li><a href="#">篮球</a></li>
                                <li><a href="#">综训</a></li>
                                <li><a href="#">生活</a></li>
                                <li><a href="#">健身</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="woMan"><a href="#" title="女子"><span>女子</span></a>
                    <div class="woman">
                        <div class="center">
                            <ul>
                                <h5>所有鞋类</h5>
                                <li><a href="#">跑鞋</a></li>
                                <li><a href="#">休闲鞋</a></li>
                                <li><a href="#">板鞋</a></li>
                                <li><a href="#">棉鞋</a></li>
                            </ul>
                            <ul>
                                <h5>所有服装</h5>
                                <li><a href="#">羽绒服</a></li>
                                <li><a href="#">套头卫衣</a></li>
                                <li><a href="#">外套/夹克</a></li>
                                <li><a href="#">长裤</a></li>
                                <li><a href="#">短袖T恤</a></li>
                                <li><a href="#">运动短裤</a></li>
                            </ul>
                            <ul>
                                <h5>所有配件</h5>
                                <li><a href="#">包类</a></li>
                                <li><a href="#">运动袜子</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="Child"><a href="#" title="儿童"><span>儿童</span></a>
                    <div class="child">
                        <div class="center">
                            <ul>
                                <h5>新品上市NEw</h5>
                                <li><a href="#">男中大童</a></li>
                                <li><a href="#">女中大童</a></li>
                                <li><a href="#">男小童</a></li>
                                <li><a href="#">女小童</a></li>
                                <li><a href="#">婴童</a></li>
                            </ul>
                            <ul>
                                <h5>所有鞋类</h5>
                                <li><a href="#">跑鞋</a></li>
                                <li><a href="#">篮球鞋</a></li>
                                <li><a href="#">休闲鞋</a></li>
                                <li><a href="#">板鞋</a></li>
                                <li><a href="#">足球鞋</a></li>
                            </ul>
                            <ul>
                                <h5>所有服装</h5>
                                <li><a href="#">套头卫衣</a></li>
                                <li><a href="#">羽绒服</a></li>
                                <li><a href="#">短袖T恤</a></li>
                                <li><a href="#">运动短裤</a></li>
                                <li><a href="#">长裤</a></li>
                            </ul>
                            <ul>
                                <h5>所有配件</h5>
                                <li><a href="#">包类</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;" title="安踏儿童"><span>安踏儿童</span></a></li>
                <li><a href="javascript:;" title="品牌文化"><span>品牌文化</span></a></li>
                <li><a href="javascript:;" title="观赏视频"><span>观赏视频</span></a></li>
                <li><a href="javascript:;" title="联系我们"><span>联系我们</span></a></li>
                <li>
                    <div class="nav-search">
                        <a href="" title="搜索" class="nav-search-a iconfont icon-search"></a>
                        <input type="text" placeholder="搜索" autocomplete="off">
                    </div>
                </li>
            </ul>
        </div>

    </nav>
    <main>
        <div class="main-yi">
            <div class="main-box">
                <div class="main-box-banxin">
                    <div class="zc-shang"></div>
                    <div class="zc-shuru">
                        <div class="shuru-box">
                            <div class="login-shang">
                                <h6><a href="javascript:;" data-type="mobile" data-name="手机号码" class="active">手机注册</a>
                                </h6>
                                <h6><a href="javascript:;" data-type="email" data-name="邮箱地址">邮箱注册</a></h6>
                            </div>
                            <div class="login-zhong">
                                <form action="../html/dl.html" style="display: block;">
                                    <div class="tishi">请输入手机号码注册：</div>
                                    <input type="text" placeholder="手机号" id="username" name="username">
                                    <input type="password" placeholder="密码" id="userpass" class="yanzheng"
                                        name="userpass">

                                    <input type="submit" id="btnReg" value="确认">
                                </form>
                            </div>







                        </div>


                    </div>

                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="ft">
            <div class="ft-left">
                <img src="	https://img.fishfay.com/theme/images/logo/slogan-anta-r.svg" alt="">
            </div>
            <div class="ft-right">
                <div class="ft-right-left">
                    <h4 class="h4-1">
                        在线客服
                        <span class="iconfont icon-zaixiankefu"></span>
                    </h4>
                    <h4 class="h4-2">
                        在线咨询
                        <span>400-858-2020</span>
                    </h4>
                </div>
                <div class="ft-right-right">
                    <a href="" class="wxt">
                        <img src="../img/com-qr-code.jpg" alt="">
                    </a>
                </div>
                <div class="banquan">
                    <span>Copyright(C) 2012-2020 by www.ANTA.cn</span>
                    <span>©安踏体育用品有限公司版权所有</span>
                    <a target="_blank" href="">营业执照</a>
                    <a target="_blank" href="">开户许可证</a>
                    <a target="_blank" href="">个人信息保护政策</a>
                    <br>
                    <a target="_blank" href="">闽ICP备2021011550号-2</a>
                    <a target="_blank" href="">闽公网安备35020302033806号</a>

                </div>
            </div>
        </div>
    </footer>
    <div class="dht">
        <div title="返回顶部" class="gotop"></div>
        <a href="" title="购物车"></a>
        <a href="javascript:;" title="客服"></a>
    </div>
</body>

</html>
<script src="../js/jquery.min.js"></script>
<script>
    $("h6").click(function () {
        let index = $(this).index("h6");
        $(this).addClass("active").siblings("h6").removeClass("active");
        $("form").eq(index).css("display", "block").siblings("form").css("display", "none")
    })


    function isTest() {
        return isUserName() && isUserPass();
    }

    function isUserName() {
        //手机号验证和非空
        let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
        if ($("#username").val() == "" || !reg.test($("#username").val())) {
            return false;
        }
        return true;

    }

    function isUserPass() {
        //非空
        if ($("#userpass").val() == "") {
            return false;
        }
        //6-16位
        let reg = /^\d{6,16}$/;
        if (!reg.test($("#userpass").val())) {
            return false;
        }
        return true;
    }


    $(".gotop").on("click", function () {
        $("html,body").animate({ // 让body和html回到顶部
            scrollTop: 0
        }, 500)
    })



    //验证用户名是否存在
    let hasUser = false;
    function hasUserBack() {
        $.get('../goodsAndShoppingCart/checkUser.php', { "username": $("#username").val() }, function (data) {
            if (data.trim() == "1") {
                alert("手机号可用");
                hasUser = true;
                 return;
            } else {
                alert("不可用");
                hasUser = false;
               
            }
        })
    }





    $(function () {
        $("#username").blur(function () {
            //1、前端验证
            if (isUserName() == false) {
                alert("亲，用户名的格式不正确！");
                
            }
            //2、后端的验证
            hasUserBack();
        });

        $("#userpass").blur(function () {
            //1、前端验证
            if (isUserPass() == false) {
                alert("亲，密码格式不正确!");
            } else {
                alert("亲，密码完成了!");
            }
        });

        $("#btnReg").click(function () {
            //1、前端验证
            if (isTest() == false) {
                alert("亲，您的信息输入不全");
                return;
            }
            //2、用户名是否存在(后端验证)
            if (hasUser) {
                let xhr = new XMLHttpRequest();

                xhr.open("post", "zc.php");


                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send("username=" + $("#username").val() + "&userpass=" + $("#userpass").val());

                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        console.log(xhr.responseText);// success/fail
                        alert("注册成功");
                        location.href = './dl.html';
                    }
                    else {
                        alert("注册失败")
                    }
                }

            }

        });

    });



</script>